<%--
  Created by IntelliJ IDEA.
  User: 15119
  Date: 2018-10-21
  Time: 20:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<html>
<head>
    <title>Title</title>

</head>


<div class="title_right">
    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
        <div class="input-group">

            <input type="text" class="form-control" placeholder="请购编号/供应商..." id="showhide" @change="sele()"  v-model="testval">
            <span class="input-group-btn">
                      <button class="btn btn-default" type="button"  v-bind:style = "styleobj">Go!</button>
        </span>
        </div>
    </div>
</div>
<div id="exlist">

    <div>
        <input type="button" id="selAll"  class="btn btn-primary" value="全选">
        <button  style="margin-left:10px;" class="btn btn-info" @click="ssd">通过订单</button>
    </div>
    <table class="table table-hover">
        <tr>
            <td>审核</td>
            <td>供应商名称</td>
            <td>请购单号</td>


            <td>物料名称</td>
            <td>规格</td>
            <td>颜色</td>

            <td>清单状态</td>
            <td>生产工厂</td>
            <td>发往方向</td>

            <td>采购数量</td>

            <td>单价</td>

            <td>金额</td>
        </tr>
        <tbody>
        <template  v-for=" bb in lists">
            <tr>
                <td v-if="bb.buystate==1"><input type='checkbox' class='checkbox' :value="bb.buyerid"  v-model="checkedNames"></td>
                <td v-else-if="bb.buystate==2">√</td>

                <td>{{bb.supname}}</td>
                <td>{{bb.purcode}}</td>

                <td>{{bb.supinfoname}}</td>
                <td>{{bb.supmodels}}</td>
                  <td>{{bb.tinctname}}</td>


                <td v-if="bb.buystate==1" style="color:red;">未处理</td>
                <td v-else-if="bb.buystate==2" style="color:lightseagreen;">已处理</td>

                <td>{{bb.purchang}}</td>
                <td>{{bb.purhuo}}</td>

                <td>{{bb.buynum}}</td>

                <td>{{bb.buymoney}}</td>
                <td>{{bb.buyallmoney}}</td>
            </tr>
        </template>

        </tbody>

    </table>
</div>
<div id="fenye">
    <button class='btn btn-info btn-sm' @click='shang(1,1)' style="font-weight:bold;margin-left:500px;font-family: 楷体;font-size:15px;"type="button">上一页</button>
    {{currentPage}}/{{MaxPage}}
    <button class='btn btn-info btn-sm' @click='xia(1,1)' style="font-weight:bold;font-family: 楷体;font-size:15px;"type="button">下一页</button>

    <span style="font-family:楷体;font-size:20px;">总{{MaxPage}}页</span>
</div>
</body>
</html>
<script src="${pageContext.request.contextPath}/js/Vue.js"></script>
<script src="${pageContext.request.contextPath}/js/vue-resource.min.js"></script>
<script>

    var showhide = new Vue({
        el: '#showhide',
        data: {
            testval:'',
        }, methods:{
            sele:function() {
                load.fenye(1,this.testval);
            }        }

    })

    $(function(){
        load.fenye(1,"q");

    })
    Vue.use(VueResource);
    var load= new Vue({
        el:"#exlist",
        data:{
            lists:"",
            checkedNames:[],
        },
        methods:{
            fenye: function (pageNum,purcode){

                var url = "/buyer/getBuyer"; //   前面要加/

                this.$http.post(url,{purcode:purcode,pageNum:pageNum},{emulateJSON:true}).then(function (data){//ajax请求封装

                    fan.currentPage= data.body.pageNum;
                    fan.MaxPage=data.body.pages;
                    this.lists=data.body.list;
                })
            }, ssd:function () {
                var arr=this.checkedNames;

                alert("确认入库")

                this.$http.post("/buyer/updateBuyer/"+arr,{emulateJSON:true}).then()(

                    load.fenye(1,"q")
                )
            }
        },


    })



    var fan=new Vue({
        el:"#fenye",
        data:{
            currentPage:"",
            MaxPage:"",
        },
        methods:{
            shang:function(pageNum,purcode){

                if(this.currentPage-pageNum==0){
                    pageNum=1;
                }else{
                    pageNum=this.currentPage-pageNum;
                }
                load.fenye(pageNum,showhide.testval)
            },xia:function(pageNum,purcode){

                if(this.currentPage+pageNum>this.MaxPage){
                    pageNum=this.currentPage;
                }else{
                    pageNum=this.currentPage+pageNum;
                }
                load.fenye(pageNum,showhide.testval);
            }
        }
    })

    $("#selAll").click(function(){
        $("#exlist :checkbox").each(function(){
            if($(this).prop("checked")==false){
                $(this).prop("checked",true);
            }else{
                $(this).prop("checked",false);
            }

        })

    })


</script>
